<template>
	<div class="train-teacher-test maxW">
		<div class="train-test seeOp fr">
			<!-- <a href="###">下载试卷</a> -->
			<!-- <el-button type="primary" @click="submitTask()">提交任务</el-button> -->
		</div>
		<div class="crumbs-link">
			<!-- <span @click="goback()">培训列表</span> -->
			<router-link to="/train/index">培训列表</router-link>
			<router-link to="/train/manage/index">
				<i>></i>培训管理</router-link>
			<router-link :to="{path: '/train/teacher-detail', query: {trainid: train_id}}" v-if="$route.query.name">
				<i>></i>{{$route.query.name}}</router-link>
			<strong v-if="testList.name">
				<i>></i>{{testList.name}}</strong>
			<strong v-else>
				<i>></i>试卷查看</strong>
		</div>

		<div class="train-teacher-test-content ">
			<div class="train-teacher-test-xx" v-if="1">
				<span>
					得分
					<i>{{ testList.scores }}</i>
					得分<i> {{ testList.scores }}</i>
				</span>
				<!-- 	<span>
					用时<em>--</em>
				</span> -->
			</div>

			<div class="train-teacher-test-title">
				<h3>{{testList.name}}</h3>
				<p v-if="testList.marks">满分{{testList.marks}}分</p>
			</div>

			<div class="train-teacher-test-cont">

				<el-form :model="ruleForm" ref="ruleForm" label-width="0" class="demo-ruleForm">

					<div class="train-teacher-test-radio" v-for="type in testList.question_type" :key="type.id">
						<div class="train-teacher-test-subject">
							<i>{{type.cn_num}}. </i>
							<span>{{type.question_type}} </span>
							<em> ({{type.count}}题，共{{type.score}}分)</em>
						</div>

						<ul>
							<template v-for="(item, index) in testList.question_list" v-if="parseInt(item.qt_id) === parseInt(type.id)">
								<li class="test-list" v-if="parseInt(item.qt_id) === 1 || parseInt(item.qt_id) === 2">
									<el-form-item prop="resource">
										<template v-if="item.pattern === 1">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<div class="content_vb fl" v-html="item.content"></div>
												<strong class="fl">（{{item.score}}分）</strong>
											</div>
										</template>
										<template v-if="item.pattern === 2">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<img :src="BASE_URL + item.content_path">
												<strong>（{{item.score}}分）</strong>
											</div>
										</template>
										<ul>
											<li class="test-list-option option-checked clear" v-for="(option,index) in item.option">
												<template v-if="!in_array( option.name, ruleForm.answer[item.id].answer ) && item.answer != null && in_array( option.name, item.answer )">
													<el-checkbox class="d" disabled :checked='true' :label="option.name">
													</el-checkbox>
													<div v-html="option.value"></div>
												</template>
												<template v-else-if="item.answer != null && in_array( option.name, item.answer )">
													<el-checkbox class="a" disabled :checked='true' :label="option.name">
													</el-checkbox>
													<div v-html="option.value"></div>
												</template>
												<template v-else-if="ruleForm.answer[item.id].answer != null && !in_array( option.name, item.answer ) && in_array( option.name, ruleForm.answer[item.id].answer )">
													<el-checkbox class="b" disabled :checked='true' :label="option.name">
													</el-checkbox>
													<div v-html="option.value"></div>
												</template>

												<template v-else>
													<el-checkbox class="c" disabled :label="option.name">
													</el-checkbox>
													<div v-html="option.value"></div>
												</template>
											</li>
										</ul>
										<div class="train-teacher-test-checkpoint clear">

											<span>难度：{{item.difficulty}}</span>

											<div class="train-teacher-test-checkpoint-r fr">
												<el-popover
												  placement="bottom-end"
												  width="500"
												  popper-class="test-analysis"
												  trigger="hover">
													<ul class="r_analysis">
														<li class="clear">
															<span>答案</span>
															<div>
																<span v-for="answer in item.answer">{{answer}}</span>
															</div>
														</li>
														<li class="clear">
															<span>统计</span>
															<div>
																本题共被作答{{item.question_info.answer_count}}次，正确率为{{item.question_info.true_probability}}%
															</div>
														</li>
														<li class="i_analysis clear">
															<span>解析</span>
															<template v-if="item.pattern == 1">
																<div v-html="item.resolve"></div>
															</template>
															<template v-if="item.pattern == 2">
																<div>
																	<img :src="BASE_URL + item.resolve_path">
																</div>
															</template>
														</li>
													</ul>
													<i slot="reference">查看解析</i>
												</el-popover>
											</div>
										</div>
									</el-form-item>
								</li>

								<!-- 填空题 -->
								<li class="test-list list-title-line" v-else-if="parseInt(item.qt_id) === 3">
									<el-form-item prop="resource">
										<template v-if="item.pattern === 1">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<div class="content_vb fl" v-html="item.content"></div>
												<strong class="fl">（{{item.score}}分）</strong>
											</div>
										</template>
										<template v-if="item.pattern === 2">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<img :src="BASE_URL + item.content_path">
												<strong>（{{item.score}}分）</strong>
											</div>
										</template>
										<el-form-item label-width="40px" label="答案" prop="completion" class="editorBox">
											<div class="answer_txt">
												<div v-html="ruleForm.answer[item.id].answer[0]" v-if="ruleForm.answer[item.id].answer[0]"></div>
												<p v-else>没有填写答案哦~</p>
											</div>
										</el-form-item>

									</el-form-item>
								</li>
								<!-- 不是选择题 -->
								<li class="test-list list-title-line" v-else>
									<el-form-item prop="resource">
										<template v-if="item.pattern === 1">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<div class="content_vb fl" v-html="item.content"></div>
												<strong class="fl">（{{item.score}}分）</strong>
											</div>
										</template>
										<template v-if="item.pattern === 2">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<img :src="BASE_URL + item.content_path">
												<strong>（{{item.score}}分）</strong>
											</div>
										</template>
										<el-form-item label="答案" label-width="60px" prop="completion" class="editorBox">
											<div class="answer_txt">
												<div v-html="ruleForm.answer[item.id].answer[0]" v-if="ruleForm.answer[item.id].answer[0]"></div>
												<p v-else>没有填写答案哦~</p>
											</div>
										</el-form-item>

									</el-form-item>
								</li>
							</template>
						</ul>
					</div>

				</el-form>
			</div>
		</div>

	</div>
</template>


<script>
import { VueEditor } from "vue2-editor";

export default {
    components: {
        VueEditor
    },
    data() {
        return {
            ruleForm: {
                type: [],
                answer: []
            },
            testList: {
                name: "", //标题
                time: "", //用时
                scores: "", //得分
                question_list: [], //试题内容
                question_type: [], //试题题型
                marks: null, //满分
                list: []
            },
            content: "<h1>Html For Editor</h1>",
            customToolbar: [
                [{ list: "ordered" }, { list: "bullet" }],
                [{ color: [] }, { background: [] }],
                ["clean"]
            ],

            show_flag: this.$route.query.show_flag,
            train_id: this.$route.query.train_id,
            train_little_id: this.$route.query.train_little_id,
            test_id: this.$route.query.test_id
        };
    },
    created() {
        this.get_testList();
        this.get_testAnswer();
    },
    methods: {
        goback() {
            this.$router.back(-1);
        },
        getSortFun(order, sortBy) {
            var ordAlpah = order == "asc" ? ">" : "<";
            var sortFun = new Function(
                "a",
                "b",
                "return a." + sortBy + ordAlpah + "b." + sortBy + "?1:-1"
            );
            return sortFun;
        },
        //提取二维数组中某一列的值
        getOneColumn(arrrr, filed) {
            if (
                !arrrr[0].hasOwnProperty(filed) ||
                is_empty(arrrr) ||
                is_empty(filed)
            ) {
                return [];
            }
            var re_arr = [];
            for (var i = 0; i < arrrr.length; i++) {
                re_arr.push(arrrr[i][filed]);
            }
            return re_arr;
        },
        //试卷列表
        get_testList() {
            //   this.ruleForm.sub_data = deep_clone(this.subAlbumData);
            let success = res => {
                this.testList.scores = 0;
                this.testList.name = res.data.test_name;
                this.testList.question_list = res.data.question_list;
                this.testList.question_type = res.data.question_type;
                this.testList.question_list.sort(
                    this.getSortFun("asc", "qt_id")
                );
                this.testList.question_type.forEach(item => {
                    this.testList.marks += parseInt(item.score);
                });
                for (let i = 0; i < this.testList.question_list.length; i++) {
                    let _this = this.testList.question_list[i];
                    let answer_flag = false;

                    if (_this.qt_id == 1 || _this.qt_id == 2) {
                        let answer = _this.answer.join();
                        let user_answer = _this.user_answer.join();
                        if (answer == user_answer) {
                            answer_flag = true;
                        }
                    }

                    this.ruleForm.answer[_this.id] = {
                        id: _this.id,
                        answer: _this.user_answer,
                        answer_flag: answer_flag
                    };
                    this.testList.scores += _this.user_score;
                }

                this.testList.question_list;
                // console.log(this.testList.question_list,1)
                // console.log(this.testList.question_type,2)
            };
            let params = {
                user_id: this.$g.user_id,
                train_id: this.train_id,
                test_id: this.test_id,
                train_little_id: this.train_little_id,
                show_flag: "1"
            };
            let fail = data => {};

            this.$ajax.get("api/test/get_test_detail_data", {
                params: params,
                func: { success: success, fail: fail }
            });
        },
        get_testAnswer() {
            let success = res => {
                this.testAnswer = res.data;
            };

            let fail = res => {};

            let params = {
                user_id: this.$g.user_id,
                train_id: this.train_id,
                train_little_id: this.train_little_id,
                test_id: this.test_id
            };

            this.$ajax.post("api/test/test_answer", params, {
                func: { success: success }
            });
        }
    }
};
</script>